<template>
	<div>
		<!-- <h2>我的爱好 - 旅游</h2> -->
		<view class="banner">
			<swiper class="swiper" circular autoplay indicator-dots indicator-active-color="#fff" >
				<swiper-item v-for="item in list" :key="item.id" @click="nav(item.id)">
					<view class="swiper-item uni-bg-red">
						<img :src="item.lbtimages" alt="">
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 当地 -->
		<view class="recommend">
			<view class="local" v-for="item in localList" :key="item.id" @click="recommend(item.id)">
				<img :src="item.uImg" alt=""> 
				<view>{{ item.name }}</view>
			</view>
		</view>
		<!-- 个人推荐 -->
		<view class="person">
			<view class="per-tj">
				<img src="../../static/study.png" alt="">
				<span>--景点推荐--</span>
			</view>
			<!-- 展示 -->
			
			<view class="show" >
				<view class="show-box" v-for="item in scenicList" :key='item.id'>
					<div style="display: flex; margin-bottom: 5px;"   @click="lmsk(item.jqid)">
						<img :src="item.jqimages" alt="" >
						<div style=" overflow:auto;margin-left: 10px;">
						
						<view>{{ item.jqxuzhi}}</view>
					</div>
					</div>			
					     <span class="" style="display: flex;justify-content:space-between;"><view class="" style="width: 80%;">
					     	<span>地址：</span>{{item.jqaddress }}
					     </view>
						 <button style="width: 60px; font-size: 16rpx; line-height: 30px; color: red;" @click="handleAdd(item)">点击预定</button>
						 </span>
			
				</view>
			</view>
			
		<!-- 	<view class="show" >
				<view class="show-box" @click="bmy">
					<img src="https://img1.baidu.com/it/u=549863121,1651810654&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=260"  alt="" >
					<view class="">西安秦始皇兵马俑</view>
				</view>		
				<view class="show-box" @click="byc">
					<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp2.itc.cn%2Fimages01%2F20210709%2F769d92fed43046caaf48532806e0388a.jpeg&refer=http%3A%2F%2Fp2.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671619107&t=db33697e144d5a34f8da3b074f41c5cd" alt="">
					<view class="">大唐不夜城</view>
				</view>
			</view> -->
			
			<view class="fotter">没有更多了......</view>
			
			
		</view>
		
	</div>
</template>

<script>
	import store from '../../store/index.js'
	export default {
		data () {
			return {
				// innerAudioContext: null
				list: [
					{ id: 1, img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fq_70%2Fimages01%2F20211212%2Fdc4e30cda497419498bafcc71f8d6add.jpeg&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671364187&t=1f20d773999ad7e4dc20ad13aafeb123' },
					{ id: 2, img: 'https://img0.baidu.com/it/u=2999387455,2366307330&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500' },
					{ id: 3, img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181008%2F8469908d350249678e533e08e8e2f03f.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671364506&t=37598d6f0afcec1e7667a6b91507a6e9' },
					{ id: 4, img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20210222ac%2F725%2Fw2000h1125%2F20210222%2F0b8c-kkmphps1384742.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671610457&t=6efb1c493ab47f15d4bb25e1c253ec38' }
				],
				localList: [
					{ id: 1, name : '当地小吃', uImg: '../../static/xiaochi.png' },
					{ id: 2, name : '当地特产', uImg: '../../static/techan.png' },
					{ id: 3, name : '旅游新闻', uImg: '../../static/xinwen.png' },
				],
				scenicList:[]
			}
		},
		onLoad () {
			store.commit('getChange')
		},
		onShow () {
		this.fetchScenicList()	
this.handleSwiper()
		},
	
		methods: {
			nav (id) {
				store.state.innerAudioContext.pause()
				// console.log(id);
				uni.navigateTo({
					url: `/pages/particulars/index?id=${id}` 
				})
			},
			recommend (id) {
				console.log(id);
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/local/index?id=${id}` 
				})
				
			},
			ljs () {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/ljs` 
				})
			},
			handleSwiper(row){
			
				uni.request({
				   url: 'http://124.223.111.96:80/lbt/getAll',
				   method: 'GET',
				   success: (res) => {
				     console.log(res,'轮播图')
					this.list = res.data.data
					
				   },
				   fail: (err) => {
				     console.error('Error fetching data:', err);
				   }
				 });
			},
			handleAdd(row){
				const userId = uni.getStorageSync('userId');
				uni.request({
				   url: 'http://124.223.111.96:80/order/add',
				   method: 'POST',
				   data:{orderspid:row.jqid,ordertype:1,userid:userId ,kflx:row.hoteltype,orderprice:row.jqprice,orderimages:row.jqimages,ordername:row.jqname},
				   success: (res) => {
				     console.log(res)
					 uni.showToast({
					     title: '景点预定成功',
					     icon: 'success',
					     duration: 2000
					 });
					 this.fetchScenicList ()
				   },
				   fail: (err) => {
				     console.error('Error fetching data:', err);
				   }
				 });
			},
			fetchScenicList (){
				     uni.request({
				        url: 'http://124.223.111.96:80/scenic/getAll',
				        method: 'GET',
				        success: (res) => {
				          console.log(res.data.data);
						  this.scenicList= res.data.data
				        },
				        fail: (err) => {
				          console.error('Error fetching data:', err);
				        }
				      });
			},
			
			lmsk (id) {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/lmsk?id=${id}` 
				})
			},
			bmy () {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/bmy` 
				})
			},
			byc () {
				store.state.innerAudioContext.pause()
				uni.navigateTo({
					url: `/pages/components/byc` 
				})
			}
	
		},
		onMounted() {
			
		},
		// 转发 点击右上角的三个点
				onShareAppMessage() {
					return {
						title: '欢乐购',
						path: '/pages/home/index',
						imageUrl: 'https://img1.baidu.com/it/u=2992043196,185108022&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=598'
					}
				},
		
		
	}
</script>

<style >
	h2 {
		text-align: center;
		margin: 20rpx 0 10rpx 0;
		color: #f00;
	}
	.banner {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 460rpx;
	}
	.swiper .swiper-item img {
		height: 300px;
		width: 100%;
		background-size: contain;
	}
	
	.recommend {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}
	
	.local {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.local view {
		margin-top: 10rpx;
	}
	
	.recommend img {
		width: 100rpx;
		height: 100rpx;
	}
	
	.person {
		margin-top: 40rpx;
	}

	.per-tj {
		display: flex;
		align-items: center;
	}

	.per-tj img {
		width: 100rpx;
		height: 100rpx;
	}
	.show {
		/* display: flex; */
		width: 750rpx;
	}
	.show-box {
		 border: 1px solid #ccc;
	padding: 10px;
	}
	.show-box view {
		/* text-align: center; */
	
		height: 60rpx;
		line-height: 60rpx;
	}
	.show-box img {
		width: 200px;
		height: 300rpx;
	}
	.show-box img:nth-child(2) {
		margin-left: 10rpx;
	}
	.fotter {
		margin-left: 10px;
		    color: #ccc;
		    margin-top: 10px;
	}
	
</style>
